import styles from './index.module.css'
import React, { useEffect, useState } from 'react'

import { Image, Toast, Grid } from 'antd-mobile'
import { AddSquareOutline, CloseCircleOutline } from 'antd-mobile-icons'

//网络请求
import { getSession, getOpenid } from '../../utils/axiosRequest/api'
import { alert } from 'antd-mobile/es/components/dialog/alert'


//微信js-sdk
function Demo01() {
    const [currentUrl, setCurrentUrl] = useState()
    const [latitude, setlatitude] = useState()
    const [openId, setopenId] = useState()

    const [imgSrcList, setImgSrcList] = useState([])

    //微信JSSDK
    const wx = React.useRef();

    //[]空数组相当于componentDidMount
    useEffect(() => {
        //返回的函数相当于unmountComponentAtNode
        initData()

        return () => {

        }
    }, []);

    function initData() {
        //当前url,要拿到code换取微信唯一标识
        //处理url->当前网页的URL，不包含#及其后面部分
        const url = window.location.href.split('#')[0]

        //获取用户唯一标识,先获取url中的code
        const urlObj = new URL(url);
        // 使用URLSearchParams获取所有参数
        const paramsList = new URLSearchParams(urlObj.search);
        // 使用forEach遍历所有参数
        const allParams = {};
        paramsList.forEach((value, key) => {
            allParams[key] = value;
        });
        setCurrentUrl(url)
        const params1 = new Map()
        params1.set('code', allParams.code)
        getOpenid(params1)
            .then(response => {
                const data = response.data
                setopenId(data)
            }).catch(error => {
                alert(error.message)
            });

        //获取js注册配置 当前网页的URL，不包含#及其后面部分
        const params = new Map()
        params.set('hrefUrl', url)
        wx.current = window.wx;
        getSession(params)
            .then(response => {
                const data = response.data
                //const wx = window.wx;
                wx.current.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: 'wxdd2002c0c548a1e0', // 必填，公众号的唯一标识
                    timestamp: data.timestamp, // 必填，生成签名的时间戳
                    nonceStr: data.nonceStr, // 必填，生成签名的随机串
                    signature: data.signature,// 必填，签名
                    jsApiList: ['openLocation', 'getLocation', 'chooseImage', 'uploadImage', 'hideAllNonBaseMenuItem'] // 必填，需要使用的JS接口列表
                });

            })
            .catch(error => {
                console.log("hm2", error.message);
            });
        wx.current.ready(function () {
            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
            wx.current.getLocation({
                type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
                success: function (res) {
                    var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                    var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                    var speed = res.speed; // 速度，以米/每秒计
                    var accuracy = res.accuracy; // 位置精度
                    setlatitude(latitude)
                },
                fail: function (res) {
                    setlatitude(res.errMsg)
                }
            });
            //隐藏所有非基础按钮接口
            wx.current.hideAllNonBaseMenuItem();
        });
        // wx.error(function (res) {
        //     console.log("---错误了了" + res.errMsg);
        //     // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        // });
    }

    function clickAdd() {
        wx.current.chooseImage({
            count: 1, // 默认9
            sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function (res) {
                //这是一个数组
                const localIds = res.localIds[0]; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                setImgSrcList(prevState => [...prevState, localIds]);

                wx.current.uploadImage({
                    localId: localIds, // 需要上传的图片的本地ID，由chooseImage接口获得
                    isShowProgressTips: 1, // 默认为1，显示进度提示
                    success: function (res) {
                        var serverId = res.serverId; // 返回图片的服务器端ID
                        //给服务端-》素材管理-获取临时素材接口
                    },
                    fail: function (res) {
                        alert('22' + res.errMsg)
                    }
                });
            }
        });
    }

    function previewImage(index) {
        //支持localId预览图片
        wx.current.previewImage({
            current: imgSrcList[index], // 当前显示图片的http链接
            urls: imgSrcList // 需要预览的图片http链接列表
        });
    }

    function deleteImg(index) {
        imgSrcList.splice(index, 1);
        setImgSrcList(prevState => [...prevState]);//刷新
    }

    return (
        <div>
            <span>微信js:{currentUrl}</span>
            <h3>位置:{latitude}</h3>
            <h3>用户唯一标识:{openId}</h3>
            <div>
                <AddSquareOutline className={styles.img_add} onClick={clickAdd}></AddSquareOutline>
            </div>
            <div className={styles.img_grid}>
                <Grid columns={3} gap={15}>
                    {imgSrcList.map((item, index) => (
                        <Grid.Item key={index}>
                            <div>
                                <div className={styles.img_close} >
                                    <CloseCircleOutline onClick={() => { deleteImg(index) }} style={{ width: '17px', height: '17px' }} />
                                </div>
                                <Image onClick={() => { previewImage(index) }} fit='cover' className={styles.img_show} src={item}></Image>
                            </div>
                        </Grid.Item>
                    ))}
                </Grid>
            </div>
        </div>
    )
}

export default Demo01;
